<template>

    <el-form
            ref="reqParam"
            label-width="120px"
            class="demo-ruleForm"
            size="default"
            status-icon
    >
        <el-form-item label="名称" prop="name">
            <el-input v-model="reqParam.name" />
        </el-form-item>
        <el-form-item label="商品类型" prop="type">
            <el-select v-model="reqParam.type" placeholder="请选择">
                <el-option v-for="item in typeMap" :label="item[0]">{{ item[1] }}</el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="数量" prop="number">
            <el-input v-model="reqParam.name" />
        </el-form-item>

        <el-form-item label="交易方式" prop="type">
            <el-select v-model="reqParam.tradeType" placeholder="请选择">
                <el-option v-for="item in tradeTypeMap" :label="item[0]">{{ item[1] }}</el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="标签" prop="type">
            <el-checkbox-group v-model="reqParam.tagIdList">
                <el-checkbox v-for="item in tagList" :label="item.id">{{ item.name }}</el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-upload
            v-model:file-list="fileList"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
        >
            <el-icon><Plus /> 头像</el-icon>
        </el-upload>


        <el-form-item label="描述" prop="desc">
            <el-input v-model="reqParam.content" type="textarea" />
        </el-form-item>
        <el-upload
                v-model:file-list="fileList"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
        >
            <el-icon><Plus /></el-icon>
        </el-upload>
        <!--上传-->
        <el-dialog v-model="reqParam.fileList">
            <!--            <img w-full :src="dialogImageUrl" alt="Preview Image" />-->
            <img :src="dialogImageUrl" alt="图片" />
        </el-dialog>

        <el-upload
                v-model:file-list="reqParam.fileList"
                class="upload-demo"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                multiple
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :on-exceed="handleExceed"
        >
            <el-button type="primary">点击上传</el-button>
            <!--            <template #tip>-->
            <div class="el-upload__tip">
                在此上传附件
            </div>
            <!--            </template>-->
        </el-upload>

        <el-form-item>
            <el-button type="primary" @click="submitForm()">
                保存
            </el-button>
            <el-button type="primary" @click="submitForm()">
                保存并发布
            </el-button>
            <el-button @click="resetForm()">
                重置
            </el-button>
        </el-form-item>
    </el-form>
  <!--  {{ reqParam }}-->


</template>

<script setup>

import { ref } from 'vue'
import {Plus} from "@element-plus/icons-vue";

const loginUserId = ref("")
const loginUserName = ref("")

const tradeTypeMap = ref(new Map([
    ['0', "社区货币"],
    ['1', "微信"],
    ['2', "支付宝"],
    ['3', "物物交换"],
    ['4', "免费"],
    ['5', "自定义"]
]))

const typeMap = ref(new Map([
    ['1', "游戏账号"],
    ['2', "游戏装备"],
    ['3', "游戏外设"],
    ['4', "其他内容"]
]))

const reqParam = ref({
    loginUserId: "",
    loginUserName: "",
    creatorId: "",
    creatorName: "",
    gmtCreateTime: "",
    modifierId: "",
    modifierName: "",
    gmtModifyTime: "",
    id: "",
    name: "",
    price: 0.0,
    type: "",
    typeList: [],
    userId: "",
    content: "",
    headIconUrl: "",
    pictureUrls: "",
    pictureUrlList: [],
    remainNum: 0,
    status: "",
    tradeType: ""
})

const tagList = ref([
    {
        id: "1",
        name: "阴阳师",
        type: "1",
        hotCount: 0,
        creatorId: "",
        creatorName: "",
        gmtCreateTime: "",
        modifierId: "",
        modifierName: "",
        gmtModifyTime: ""
    },
    {
        id: "2",
        name: "只狼",
        type: "1",
        hotCount: 0,
        creatorId: "",
        creatorName: "",
        gmtCreateTime: "",
        modifierId: "",
        modifierName: "",
        gmtModifyTime: ""
    },
    {
        id: "3",
        name: "美妆",
        type: "2",
        hotCount: 0,
        creatorId: "",
        creatorName: "",
        gmtCreateTime: "",
        modifierId: "",
        modifierName: "",
        gmtModifyTime: ""
    }
])


</script>

<style scoped>


</style>